<template>
  <div class="container">
    <navBar :navBar="navBar"></navBar>
    <div class="content">
      <van-tabs
        v-model="active"
        color="#588bf7"
        title-active-color="#588bf7"
        @change="changetab"
      >
        <!-- <van-tab :title="$t('在持')">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('没有更多数据了')"
              :error.sync="error"
              :error-text="$t('没有更多数据了')"
              @load="getBibiOrderInfo"
            >
              <van-cell v-for="(item, index) in bibiOrderList" :key="index">
                <div
                  class="itemBox"
                >
                  <div class="topInner">
                    <p class="ttl">{{item.bi_name}}/{{$t('USDT')}}</p>
                    <p
                      class="note"
                      v-if="item.status == 2"
                      @click="cancelOrder(item.id)"
                    >
                      {{ $t("撤销") }}
                    </p>
                  </div>
                  <div class="btmInner">
                    <div class="item">
                      <p class="ttl" v-show="item.type == 1">
                        {{ $t("买入时间") }}
                      </p>
                      <p class="ttl" v-show="item.type == 2">
                        {{ $t("卖出时间") }}
                      </p>
                      <p class="text">
                        {{ formatTime(item.addtime, "yyyy-MM-dd HH:mm:ss") }}
                      </p>
                    </div>
                    <div class="item">
                      <p class="ttl">{{ $t("委托价格") }}</p>
                      <p class="text">
                        {{ Number(item.start_money).toFixed(6) }}
                      </p>
                    </div>
                    <div class="item">
                      <p class="ttl">{{ $t("金额") }}({{ $t("USDT") }})</p>
                      <p class="text">{{ Number(item.money).toFixed(6) }}</p>
                    </div>
                  </div>
                </div>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab> -->
        <van-tab :title="$t('挂单')">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('没有更多数据了')"
              :error.sync="error"
              :error-text="$t('没有更多数据了')"
              @load="getBibiOrderInfo"
            >
              <van-cell v-for="(item, index) in bibiOrderList" :key="index">
                <div class="itemBox">
                  <div class="topInner">
                    <p class="ttl">{{ item.bi_name }}/{{ $t("USDT") }}</p>
                    <p
                      class="note"
                      v-if="item.status == 2"
                      @click="cancelOrder(item.id)"
                    >
                      {{ $t("撤销") }}
                    </p>
                  </div>
                  <div class="btmInner">
                    <div class="item">
                      <p class="ttl" v-show="item.type == 1">
                        {{ $t("买入时间") }}
                      </p>
                      <p class="ttl" v-show="item.type == 2">
                        {{ $t("卖出时间") }}
                      </p>
                      <p class="text">
                        {{ formatTime(item.addtime, "yyyy-MM-dd HH:mm:ss") }}
                      </p>
                    </div>
                    <div class="item">
                      <p class="ttl">{{ $t("委托价格") }}</p>
                      <p class="text">
                        {{ Number(item.start_money).toFixed(6) }}
                      </p>
                    </div>
                    <div class="item">
                      <p class="ttl">{{ $t("金额") }}</p>
                      <p class="text">{{ Number(item.money).toFixed(2) }}</p>
                    </div>
                  </div>
                </div>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab :title="$t('成功')">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('没有更多数据了')"
              :error.sync="error"
              :error-text="$t('没有更多数据了')"
              @load="getBibiOrderInfo"
            >
              <van-cell v-for="(item, index) in bibiOrderList" :key="index">
                <div class="itemBox">
                  <div class="topInner">
                    <p class="ttl">{{ item.bi_name }}/{{ $t("USDT") }}</p>
                    <p
                      class="note"
                      v-if="item.status == 2"
                      @click="cancelOrder(item.id)"
                    >
                      {{ $t("撤销") }}
                    </p>
                  </div>
                  <div class="btmInner">
                    <div class="item">
                      <p class="ttl" v-show="item.type == 1">
                        {{ $t("买入时间") }}
                      </p>
                      <p class="ttl" v-show="item.type == 2">
                        {{ $t("卖出时间") }}
                      </p>
                      <p class="text">
                        {{ formatTime(item.addtime, "yyyy-MM-dd HH:mm:ss") }}
                      </p>
                    </div>
                    <div class="item">
                      <p class="ttl">{{ $t("委托价格") }}</p>
                      <p class="text">
                        {{ Number(item.start_money).toFixed(2) }}
                      </p>
                    </div>
                    <div class="item">
                      <p class="ttl">{{ $t("金额") }}({{ $t("USDT") }})</p>
                      <p class="text">{{ Number(item.money).toFixed(2) }}</p>
                    </div>
                  </div>
                </div>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab :title="$t('已结束')">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('没有更多数据了')"
              :error.sync="error"
              :error-text="$t('没有更多数据了')"
              @load="getBibiOrderInfo"
            >
              <van-cell v-for="(item, index) in bibiOrderList" :key="index">
                <div class="itemBox">
                  <div class="topInner">
                    <p class="ttl">{{ item.bi_name }}/{{ $t("USDT") }}</p>
                    <p
                      class="note"
                      v-if="item.status == 2"
                      @click="cancelOrder(item.id)"
                    >
                      {{ $t("撤销") }}
                    </p>
                  </div>
                  <div class="btmInner">
                    <div class="item">
                      <p class="ttl" v-show="item.type == 1">
                        {{ $t("买入时间") }}
                      </p>
                      <p class="ttl" v-show="item.type == 2">
                        {{ $t("卖出时间") }}
                      </p>
                      <p class="text">
                        {{ formatTime(item.addtime, "yyyy-MM-dd HH:mm:ss") }}
                      </p>
                    </div>
                    <div class="item">
                      <p class="ttl">{{ $t("委托价格") }}</p>
                      <p class="text">
                        {{ Number(item.start_money).toFixed(2) }}
                      </p>
                    </div>
                    <div class="item">
                      <p class="ttl">{{ $t("金额") }}({{ $t("USDT") }})</p>
                      <p class="text">{{ Number(item.money).toFixed(2) }}</p>
                    </div>
                  </div>
                </div>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
import { formatTime } from "@/utils/tools";
export default {
  name: "financialTradeList2",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("委托订单"),
        close: false,
        btn: "",
      },
      bibiOrderList: [],
      active: 0,
      loading: false,
      finished: false,
      error: false,
      refreshing: false,
      pageSize: 10,
      pageNumber: 0,
      totalElements: 0,
      status: 1,
    };
  },
  mounted() {},
  watch: {
    active(val) {
      if (val == 0) {
        this.status = 1;
      }
      if (val == 1) {
        this.status = 2;
      }
      if (val == 2) {
        this.status = 4;
      }
      this.pageNumber = 0;
      this.getBibiOrderInfo();
    },
  },
  methods: {
    formatTime,

    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.pageNumber = 0;
      this.bibiOrderList = [];
      this.getBibiOrderInfo();
    },
    // 撤销订单
    cancelOrder(id) {
      let data = {
        id: id,
      };
      var that = this;

      $postAxios(api.cancelAutoBibiOrder, data, (res) => {
        if (res.code == 0) {
          this.$toast(this.$t("撤销成功"));
          this.pageNumber = 0;
          this.bibiOrderList = [];
          this.getBibiOrderInfo();
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
    // 切换tab
    changetab() {
      this.pageNumber = 0;
      this.bibiOrderList = [];
    },
    // 获取币币订单数据
    getBibiOrderInfo() {
      if (this.refreshing) {
        this.bibiOrderList = [];
        this.pageNumber = 0;
        this.refreshing = false;
      }
      // let status = this.active + 1;
      // alert(this.status);
      let data = {
        page: this.pageNumber,
        rows: this.pageSize,
        status: this.status,
      };
      $postAxios(api.getUserBibiOrderList, data, (res) => {
        if (res.code == 0) {
          this.totalElements = res.count;
          if (this.pageNumber == 0) {
            this.bibiOrderList = res.data;
          } else {
            this.bibiOrderList = this.bibiOrderList.concat(res.data);
          }
          this.pageNumber++;
          this.loading = false;
          if (this.bibiOrderList.length == this.totalElements) {
            this.finished = true;
          }
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f7f6fb;
  .content {
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  ::v-deep.van-tabs {
    height: 100%;
    .van-tabs__wrap {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 999;
    }
    .van-tabs__content {
      width: 100%;
      height: calc(100% - 40px);
      position: absolute;
      left: 0;
      top: 40px;
      bottom: 0;
      box-sizing: border-box;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
  .content {
    padding: 10px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .itemBox {
      margin-bottom: 10px;
      padding: 0;
      border-radius: 4px;
      background-color: #fff;
      .topInner {
        margin-bottom: 10px;
        padding: 0 10px;
        color: #000;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .btmInner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item {
          width: 27%;
          color: #000;
          font-size: 14px;
          flex-shrink: 0;
          text-align: center;
          flex-direction: column;
          &:first-child {
            min-width: 47%;
          }
        }
      }
    }
  }
}
</style>